<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./v4.6.5-dist/ol.css">
    <title>基础学习之路</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        #map {
            width: 80%;
            height: 50%;
            margin: 0 auto;
        }

        #map2 {
            width: 80%;
            height: 50%;
            margin: 0 auto;
        }

        #map3 {
            width: 80%;
            height: 50%;
            margin: 0 auto;
        }

        #map4 {
            width: 500px;
            height: 600px;
            margin: 0 auto;
        }

        #geo {
            width: 80%;
            height: 50%;
            margin: 0 auto;
        }

        #getfeature {
            width: 80%;
            height: 50%;
            margin: 0 auto;
        }

        #wmts {
            width: 80%;
            height: 50%;
            margin: 0 auto;
        }

    </style>
    <script src="./v4.6.5-dist/ol.js"></script>
</head>
<body>

<div id="wmts">

</div>
<br>
<br>
<div id="getfeature">

</div>
<div style="text-align: center">
    Feature总数<span id="count"> 什么</span>
</div>
<br>
<br>
<div id="geo">

</div>
<br>
<br>
<div id="map4">
</div>
<br>
<br>
<div id="map3">

</div>
<div style="width: 100%;text-align: center;line-height: 30px;">
    <span>||------------------------------
        <button onclick="OpenStreetMap();" style="cursor: pointer">OpenStreetMap</button>
        <button onclick="Bing()" style="cursor: pointer">Bing</button>
        <button onclick="Stamen()" style="cursor: pointer">Stamen</button>
        <button onclick="XYZ()" style="cursor: pointer">XYZ</button>
        ------------------------------||</span>
</div>
<div id="map">

</div>
<div style="width: 100%;text-align: center;line-height: 30px;">
    <span>||------------------------------
        <button onclick="wapMap();" style="cursor: pointer">上下调换地图</button>
        <button onclick="loc()" style="cursor: pointer">定位</button>
        ------------------------------||</span>
</div>
<div id="map2">

</div>
<script>
    /*
     * 引入ol.css 要不下面会有出现openlayer的官方标注
     * */

    //创建地图
    /*图层可以创建多个  地图也可以在一个页面 创建多个
     *我们如果一个地图上 创建多个地图 但是用一个 视图的话 哪两个地图 就具有联动性
     * */
    //    var view = new ol.View({
    //        center: ol.proj.fromLonLat([121.85001, 37.3138889]),
    //        zoom: 5
    //    });
    var map = new ol.Map({
        //放置到存放地图的容器
        /*
         * 指定地图具体在那个位置显示
         * 跟地图业务没有什么关系 但是毕竟是 web GIS所以还是依赖于HTML
         * */
        target: 'map',
        //设置地图图层
        /*
         * layers 这里从名字的浅层含义来看
         * 就好比是 Photoshop的图层一样  可以创建多个图层 可以叠加
         * 由此可得 我们这里先添加一个 世界地图 open street Map
         * */
        layers: [
            //创建一个瓦片图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        controls: ol.control.defaults({
            attributionOptions: ({
                collapsible: false //控制i的展开项
            })
        }),
        //设置logo的话 src 很 href是强制属性
        logo: {src: "./demo/img/红旗.png", href: "https://www.baidu.com/"},
        //设置显示地图的视图
        /*
         * 字面意思就是地图的显示窗口 对应ol.View类
         * 这里可以自定义中心点啊 显示级别等 详细的option还得参考官方文档配置
         * */
//        view: view
        view: new ol.View({
            //设置中心点
            center: [0, 0],
            zoom: 3//设置显示级别
        })
    })
    /*
     * 其实整体来说  就是创建了一个ol.Map({})地图类
     * 创建地图就需要创造一个这么一个类
     * layer可以有多个（有多个图层）但是view（视图窗口）只能有一个
     * 背景地图就是一个layer图层 ==> new ol.layer.Tile({source:ol.source.OSM()})
     * 地图上有什么功能 放大缩小拖拽 这些代码我们是没有设置的 所以说 openlayer有很多的迷人行为
     * 一个地图的构造远不是只有layers跟view这么简单的
     * */

    //地图的核心组成部分
    /*
     *==》地图（map） 对应的类ol.map
     *==》视图（view） 对应的类ol.View
     *==》图层（Layer）有不同业务的图层 每种图层对应不同的类
     *但是全放在ol.layer 下面 刚才写的有ol.layer.Tile这只是一种
     *openlayer允许多个图层重叠在一起 之间互不干扰的 是图形显示与管理的好方法
     *这种方法可以很好地处理复杂的问题以及数据来源的  它更多的表现为组织管理的类
     *==》数据源（source）这个是跟图层是对应的 他也有很多不同的数据源 每一种在表现上都对应一个类
     * 他们放在包的 ol.souc下面 比如刚才的ol.source.OMS()就是其中一个 这是地图的核心  没有这些数据
     * 地图就出不来 现在支持多种资源 如在线的 离线的 静态的  瓦片的 栅格化的或者是矢量的 图层和数据源  是密不可分的
     * ==》控件（control）它为用户提供了地图交互的入口，不会随着地图改变大小 并且固定在最上层
     * ==》交互（interaction） 包在ol.interaction下面 就是地图的所有交互功能 如放大缩小 拖拽 。。。
     *
     * ！！！除了 layer跟source有直接的强关联以外 其他组成部分之间联系很少
     * */

    //看懂API
    /*
     * 查找
     * 搜索包名 例如ol.layer ol.source
     * 方法名 setzoom setcenter
     * 类名 Map View
     * 类的继承 在面向对象的编程当中 所有能用父类的都可以使用子类 如果子类没有new
     * 构造的话 就去子类的里面再去找
     * 比如 ol.Map的构造参数 可以设置layers属性，它的值是ol.layer.Base类型元素的集合，
     * 那么就可以用ol.layer.Base的子类ol.layer.Group或ol.layer.Layer，
     * 以此类推，也可以用这两个类的子类ol.layer.Image、ol.layer.Tile、ol.layer.Vector等。
     * 这样我们就知道具体哪些参数能用哪些类了。
     * */

    //创建多个图层
    var map2 = new ol.Map({
        target: "map2",
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        controls: ol.control.defaults({
            attributionOptions: ({
                collapsible: false //控制i的展开项
            })
        }),
        //设置logo的话 src 很 href是强制属性
        logo: {src: "./demo/img/1.jpg", href: "https://www.baidu.com/"},
//        view: view
        view: new ol.View({
            center: ol.proj.fromLonLat([121.85001, 37.3138889]),
            zoom: 5
        })
    })

    //调换地图
    var flag = false;
    function wapMap() {
// 改变两个地图的容器
        if (flag) {
            flag = false
            map.setTarget('map2');
            map2.setTarget('map');
            return flag
        }
        if (!flag) {
            flag = true
            map.setTarget('map');
            map2.setTarget('map2');
            return flag
        }
    }

    //定位
    function loc() {
        var view = map.getView(); //这个方法 是拿到当前控制的元素
        // 设置地图中心为成都的坐标，即可让地图移动到成都
        view.setCenter(ol.proj.fromLonLat([121.85001, 37.3138889]));
        view.setZoom(10);//设置缩放级别
        map.render();
    }

    /*
     * 指定地图类型
     * */
    var weixing = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
            })
        }
    )
    // Open Street Map 地图层
    var openStreetMapLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    // Bing地图层
    var bingMapLayer = new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
            imagerySet: 'Road'
        })
    });

    // Stamen地图层
    var stamenLayer = new ol.layer.Tile({
        source: new ol.source.Stamen({
            layer: 'watercolor'
        })
    });

    var map3 = new ol.Map({
        layers: [
            weixing
        ],
        view: new ol.View({
            // 设置成都为地图中心
            center: [116.38, 39.90],
            // 指定投影使用EPSG:4326
            projection: 'EPSG:4326',
            zoom: 8
        }),
        target: 'map3'
    });

    function OpenStreetMap() {
        // 先移除当前的地图，再添加Open Street Map 地图
        console.log(map3);
        console.log(map3.getLayers());
        console.log(map3.getLayers().item(0));
        map3.removeLayer(map3.getLayers().item(0));
        map3.addLayer(openStreetMapLayer);
    }

    function Bing() {
        // 先移除当前的地图，再添加Open Street Map 地图
        map3.removeLayer(map3.getLayers().item(0));
        map3.addLayer(bingMapLayer);
    }
    function Stamen() {
        map3.removeLayer(map3.getLayers().item(0));
        map3.addLayer(stamenLayer);
    }
    function XYZ() {
        map3.removeLayer(map3.getLayers().item(0));
        map3.addLayer(weixing);
    }
    /*
     * ol.source.Tile对应的是瓦片数据源，现在网页地图服务中，绝大多数都是使用的瓦片地图，而OpenLayers 3作为一个WebGIS引擎，理所当然应该支持瓦片。
     ol.source.Image对应的是一整张图，而不像瓦片那样很多张图，从而无需切片，也可以加载一些地图，适用于一些小场景地图。
     ol.source.Vector对应的是矢量地图源，点，线，面等等常用的地图元素(Feature)，就囊括到这里面了。这样看来，只要这两种Source就可以搞定80%的需求了。
     * */

    // 地图设置中心，设置到成都，在本地离线地图 offlineMapTiles刚好有一张zoom为4的成都瓦片
    var center = ol.proj.transform([116.38, 39.90], 'EPSG:4326', 'EPSG:3857');
    // 计算熊猫基地地图映射到地图上的范围，图片像素为 550*344，保持比例的情况下，把分辨率放大一些
    var extent = [center[0] - 2048 * 1000 / 2, center[1] - 2556 * 1000 / 2, center[0] + 2048 * 1000 / 2, center[1] + 2556 * 1000 / 2];

    var map4 = new ol.Map({
        view: new ol.View({
            center: center,
            zoom: 5
        }),
        target: 'map4'
    });

    map4.addLayer(new ol.layer.Image({
        source: new ol.source.ImageStatic({
            url: "./demo/img/gugong.jpg",
            imageExtent: extent
        })
    }))

    // 创建一个用于放置活动图标的layer
    var activityLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });
    // 创建一个活动图标需要的Feature，并设置位置
    var activity = new ol.Feature({
        geometry: new ol.geom.Point([center[0] - 2048 * 1000 / 2 + 1500 * 1000, center[1] - 2556 * 1000 / 2 + (2556 - 1450) * 1000])
    })
    // 设置Feature的样式，使用小旗子图标
    activity.setStyle(new ol.style.Style({
        image: new ol.style.Icon({
            src: './demo/img/ding.png',
            anchor: [0, 1],
            scale: 1
        })
    }));
    activityLayer.getSource().addFeature(activity);
    map4.addLayer(activityLayer);

    /*
     * 创建GeoJson地图
     * */

    var geoMap = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
                })
            }),
            new ol.layer.Vector({
                source: new ol.source.Vector({
                    url: "./kunyushan.json",
                    format: new ol.format.GeoJSON()// 解析矢量地图的格式化类
                }),
//                opacity: 0.5,
            })
        ],
        /*
         * 创建一个geoJson的矢量地图
         * */
        view: new ol.View({
            center: [121.76, 37.31],
            zoom: 8,
            projection: 'EPSG:4326'
        }),
        target: 'geo'
    })


    //feature 就是矢量（点线面等等）对象  可以单独设置setStyle

    //创建地图及底图
    var feaMap = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
                })
            })
        ],
        view: new ol.View({
            center: ol.proj.transform([116.38, 39.90], 'EPSG:4326', 'EPSG:3857'),
            zoom: 8
        }),
        target: "getfeature"
    })

    var BingLayer = new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
            imagerySet: 'Road'
        }),
        opacity: .5
    });

    var geoKYS = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: "./kunyushan.json",
            format: new ol.format.GeoJSON()// 解析矢量地图的格式化类
        }),
//                opacity: 0.5,

        // 设置样式，颜色为红色，线条粗细为1个像素
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                size: 1
            })
        })
    })


    // 因为是异步加载，所以要采用事件监听的方式来判定是否加载完成
    var listenerKey = geoKYS.getSource().on('change', function () {
        if (geoKYS.getSource().getState() === 'ready') {    // 判定是否加载完成
            document.getElementById('count').innerHTML = geoKYS.getSource().getFeatures().length;
            geoKYS.getSource().unByKey(listenerKey); // 注销监听器
        }
    });

    feaMap.addLayer(BingLayer)
    feaMap.addLayer(geoKYS)

    var matrixIds = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19','20'];
    var resolutions = [0.703125, 0.3515625,0.17578125,0.087890625, 0.0439453125, 0.02197265625,0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 8.58306884765625e-005, 4.291534423828125e-005, 2.1457672119140625e-005, 1.0728836059570313e-005, 5.36441802978515625e-006, 2.682209014892578e-006, 1.341104507446289e-006];
    var wmts = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.WMTS({
                    name: "state_img_2013",
                    url: "http://t0.tianditu.com/img_c/wmts",
                    layer: "img",
                    style: "default",
                    format: "tiles",
                    matrixIds: matrixIds,
                    zoomOffset: 1,
                    matrixSet: "c",
                    buffer: 0,
                    resolutions: resolutions
                })
            })
        ],
        view: new ol.View({
            center: ol.proj.transform([116.38, 39.90], 'EPSG:4326', 'EPSG:3857'),
            zoom: 8
        }),
        target: "wmts"
    })
</script>
</body>
</html>